<template>
  <div>
    <ContentHeader title="个人信息" />
    <ContentBody>
      <el-form 
        ref="refUserForm"
        :model="userInfo"
        :rules="rules"
        style="width: 450px"
        label-width="120px"
        v-if="userInfo"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userInfo.username" :disabled="true" />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="userInfo.name" />
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <ImageUpload v-model="userInfo.avatar" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="handleSave">保存</el-button>
        </el-form-item>
      </el-form>
    </ContentBody>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/stores/user'
import ImageUpload from '@/components/upload/single.vue'
import { ElMessage } from 'element-plus';

const store = useUserStore()
const { userInfo } = storeToRefs(store)
const refUserForm = ref()
const rules = {
    name: [{required: true, message: '未填写姓名', trigger: 'blur'}],
    avatar: [{required: true, message: '未上传头像', trigger: 'blur'}]
}

const handleSave = () => {
    console.log('click')
    refUserForm.value.validate(async(valid: boolean) => {
        if (valid) {
            const result = await store.updateInfo()
            if (result) {
                ElMessage.success('更新成功')
            }
        }
    })
}
</script>